<div id="app_box" class="container-fluid" style="margin-top: 50px">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li>
                    <div>
                    <span id="CardCatalog">
                        <!--Gonna put the lists of libraries and sub-libraries here-->
                        
                    </span>
                     <button class="btn btn-small" id="load_problems">Load Problems</button>                   
                    
                    <p id="Browser">
                        <!--Subject, textbook, and so on browser-->
                        
                    </p>
                    </div>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><button class="btn btn-small" id="undo_button">Undo</button></li>
                <li><button class="btn btn-small" id="redo_button">Redo</button></li>
                <li><a class="pull-right" href="http://github.com/whytheplatypus/webwork2/issues" target="_blank">BUGS!</a></li>
            </ul>

        </div>
      </div>
    </div>

  <div id="problem_container" class="row-fluid">

	      <div id="homework_sets_container" class="span2">
	    	<b>Homework Sets</b>
			<!--homework sets go here--> 
		  </div>
		  <div id="size_slider"><p>||</p></div>
		  <div id="problems_container" class="span10">
		  	<ul>
        	<li id="library_link"><a href="#library_tab"><span>Library</span></a></li>
    		</ul>
    	  <div id="library_tab"></div>
	     </div>
	     
	 </div>
	 <div>
            <input type="text" id="dialog_text" placeholder="default set"></input>
        	<button class="btn btn-small" id="create_set">Create Set</button>
        </div>
  </div>
  <script type="text/template", id="problem-template">
        <%if(!remove_display){ %><div class="handle"><i class="icon-resize-vertical icon-large"></i></div>
            <button type="button" class="remove">X</button><%}%> #replace with twitter bootstrap icons? yeah font awesome :)
            <div class="problem" data-path="<%= path %>" ><%= data %></div>
        </script>

  <script type="text/template", id="setList-template">
            <!--<li class="new_problem_set">New Problem Set</li>-->

          </script>

  <script type="text/template", id="setName-template">
              <a data-problem_count=<%= problem_count %>><%= name %><span class="problem_count" style="float:right"><%= problem_count %></style></a>
         </script>

  <script type="text/template", id="set-template">
           <h1>Problems</h1>
           <ul class="list">
           </ul>
        </script>

  <script type="text/template", id="LibraryList-template">
             <select  class="<%= name %> list">
             <option value=null>Pick a Library</option>
             </select>
             <span class="<%= name %> children"></span>
          </script>

  <script type="text/template", id="BrowseList-template">
             <select  id="library_subject" class="list">
             <option value=null>Subject</option>
             <% _.each(library_subjects, function(name) { %> <option value="<%= name %>" <% if(name == library_subject){ %> selected="selected" <% } %> ><%= name %></option> <% }); %>
             </select>
             <select  id="library_chapter" class="list">
             <option value=null>Chapter</option>
             <% _.each(library_chapters, function(name) { %> <option value="<%= name %>" <% if(name == library_chapter){ %> selected="selected" <% } %> ><%= name %></option> <% }); %>
             </select>
             <select  id="library_section" class="list">
             <option value=null>Section</option>
             <% _.each(library_sections, function(name) { %> <option value="<%= name %>"  <% if(name == library_section){ %> selected="selected" <% } %>  ><%= name %></option> <% }); %>
             </select>
             <button class="btn btn-small load_browse_problems">Load Problems</button>

          </script>

  <script type="text/template", id="Library-template">
            <h1>Problems</h1>
       	    <ul class="list">

       	    </ul>
            <!--<button type="button" onclick="increaseLibAcross();">+</button><span id="libAcross">4</span><button type="button" onclick="decreaseLibAcross();">-</button><span> problems across</span> -->
            <span class="next_group" style="display:<%= enough_problems %>;">Load the next <%= group_size %> problems.</span>
       </script>